<template>
	<view>
		<uni-nav-bar title="我的订单" :border="false" backgroundColor="#fff" leftIcon="left" @clickLeft="clickLeft"
			statusBar></uni-nav-bar>

		<view class="orderPage" v-if="orderList.length">
			<view class="row" v-for="item in orderList" :key="item._id" @click="goDetail(item)">
				<view class="head">
					<view class="number" style="font-size: 25rpx;" v-if="true">订单号：{{item.out_trade_no}}</view>

					<view class="state">
						<u-icon name="weixin-fill" size="22" color="#04C15F" v-if="item.payType == 'wxpay'"></u-icon>
						<u-icon name="zhifubao" size="22" color="#1578FF" v-if="item.payType == 'alipay'"></u-icon>
						<text :class="item.status==-2?'err':''">
							{{statusText(item.status)}}
						</text>
					</view>
				</view>

				<view class="wbox">
					<view class="" v-if="item.wuliuOrder">
						物流单号：{{item.wuliuOrder}}
					</view>
					<view class="" v-else>
						物流单号：等待商家上传物流单号
					</view>
					<view class="" v-if="item.wuliuOrder" @click.stop="copy(item.wuliuOrder)">
						<u-button type="success" text="一键复制物流单号" size="mini"></u-button>
					</view>
				</view>

				<view class="body" v-if="item.orderType!='payment'">
					<view style="display: flex;">
						<view class="" v-for="(imgitem,imgindex) in item.carsList" :key="imgindex">
							<image :src="imgitem.thumb[0].url" mode=""
								style="width: 100rpx;height: 100rpx;margin-right: 10rpx">
							</image>
						</view>
					</view>
					<view class="">
						{{getCarsListName(item.carsList)}}
					</view>
				</view>
				<view class="body" v-else>直接转账给商家</view>

				<view class="d">
					点击查看详情
				</view>

				<view class="footer">
					<view class="time">{{timeFormat(item.createTime,'yyyy-MM-dd hh:mm')}}</view>
					<view class="count" v-if="item.orderType!='payment'">
						共{{item.carsList.length}}件商品 ，实付<text class="price">￥{{priceFormat(item.total_fee)}}</text>
					</view>
				</view>
			</view>

		</view>

		<view v-else class="noOrder">
			<u-empty text="没有订单" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>

		<view v-if="noData && orderList.length" class="pageNoData">没有更多数据了</view>

	</view>
</template>

<script>
	import {
		priceFormat,
		timeFormat
	} from "@/utils/tools.js"
	const orderCloudObj = uniCloud.importObject("kt-mall-order", {
		customUI: true
	});

	export default {
		data() {
			return {
				orderList: [],
				pageNum: 1,
				noData: false
			};
		},
		onLoad() {
			this.initOrder()
			this.getOrderList();
		},
		onReachBottom() {
			if (this.noData) return;
			this.pageNum++;
			this.getOrderList();
		},
		methods: {
			priceFormat,
			timeFormat,
			// 复制物流单号
			copy(wuliuOrder) {
				uni.setClipboardData({
					data: wuliuOrder,
					success: function() {
						uni.showToast({
							icon: 'success',
							title: '一键复制成功!'
						})
					}
				});
			},
			// 初始化订单
			initOrder() {
				this.pageNum = 1
				this.orderList = []
				this.noData = false
			},
			//获取订单列表
			async getOrderList() {
				let res = await orderCloudObj.getList(this.pageNum);
				if (res.data == 0) this.noData = true;
				let newData = [...this.orderList, ...res.data];
				this.orderList = newData
			},

			//支付状态的显示
			statusText(value) {
				let obj = {
					"-2": "支付异常",
					"-1": "已关闭",
					"1": "已支付",
					"0": "未支付",
					"2": "已部分退款",
					"3": "已全额退款"
				};
				return obj[value]
			},


			//跳转到详情页
			goDetail(value) {
				let params = encodeURI(JSON.stringify(value));
				uni.navigateTo({
					url: "/pages/order/detail?item=" + params
				})
			},
			//将购物车列表遍历生成名称
			getCarsListName(arr) {
				let name = arr.map(item => {
					return item.name
				})
				return name.join(" / ")
			},

			//点击左箭头返回首页
			clickLeft() {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-bg-color;
	}

	.orderPage {
		padding: 30rpx;

		.row {
			background: #fff;
			padding: 40rpx 20rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			position: relative;

			.head {
				@include flex-box();
				font-size: 32rpx;

				.number {
					@include flex-box-set(start);

					.way {
						background: #19be6b;
						color: #fff;
						font-size: 22rpx;
						padding: 6rpx 20rpx;
						border-radius: 30rpx;
						margin-left: 10rpx;

						&.self {
							background: #FF9100;
						}
					}
				}

				.state {
					color: $brand-theme-color-aux;
					@include flex-box-set(start);
					font-size: 26rpx;

					.err {
						color: #F56C6C;
					}
				}
			}

			.wbox {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #a5a5a5;
			}

			.body {
				border: 1px solid $border-color;
				padding: 30rpx 20rpx;
				border-radius: 10rpx;
				background: #F9F9F9;
				font-size: 30rpx;
				margin: 20rpx 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}

			.d {
				position: absolute;
				top: 187rpx;
				right: 45rpx;
				font-size: 24rpx;
				color: green;
			}

			.footer {
				@include flex-box();
				font-size: 26rpx;
				color: #a5a5a5;

				.price {
					font-weight: bold;
					color: #000;
				}
			}
		}
	}

	.pageNoData {
		padding: 10rpx 0 50rpx;
		text-align: center;
		color: #666;
	}
</style>